﻿@{
    Layout = null;
}
<script src="~/layuinew/layui.js"></script>
<link href="~/layuinew/css/layui.css" rel="stylesheet" />
<body>
    <header>
        <div style="border:solid">
            <div>
                <img style="width:300px;height:100px;" src="https://th.bing.com/th/id/R.1f8f861b5193929df2f201d66fcb7441?rik=uNYSgv1LzhdD0g&pid=ImgRaw&r=0" />

                <span style="margin-left:300px">客服热线：<span style="color:yellowgreen;"> 400-535-5696</span>&nbsp;&nbsp;&nbsp;&nbsp;关于我们&nbsp|&nbsp<span class="layui-icon layui-icon-cellphone" style="font-size:15px"></span>&nbsp |</span>
            </div>

        </div>

        <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=7e948b17f454643009c8d900d55508bf"></script>
    </header>

    <main>

        <div style="width: 100vw;display: flex;text-align:center">
            <div class="layui-carousel" id="ID-carousel-demo-image" style="width:35%">
                <div carousel-item id="carousel">
                </div>
            </div>
            <div style="width:30%;font-style:normal">
                <div style="line-height:1.5;">
                    <h2>上海中心J酒店</h2>
                    <br />
                    <p>地址：上海市浦东新区陆家嘴东泰路126号上海中心大厦</p>
                    <br />
                    <p>电话：021-38868888 </p>
                </div>

                <hr style="width:315px;margin-top:25px" />
                <div>
                    <p style="margin-bottom:10px">酒店简介：</p>
                    <div style="height:100px;text-indent: 2em;" class="scroll-container">

                        <p>
                            上海中心J酒店位于世界第三、中国第一高楼，被誉为“上海之巅”的上海中心大厦的顶端，是中国民族高端酒店品牌的又一力作，也是目前全球最高酒店之一。它融合古今中外之长，集多种艺术之美，给予宾客俯瞰上海的全新视野，酒店从设计、旅行、生活、美食和美酒、科技和服务艺术出发，打造出一座云端私人艺邸，展现具有现代东方特色的旅居体验。
                        </p>
                        <p>
                            上海中心J酒店已获得GBAC STAR认证，GBAC
                            STAR是目前清洁行业权威的针对设施的疫情预防、应对和恢复的评价体系。
                        </p>
                        <p>
                            GBAC STAR 是设施清洁的黄金标准，获得该证明表明J酒店上海中心具有：
                        </p>
                        <p>
                            ①
                            建立并维持清洁、消毒和传染病预防机制，最大程度降低与新型冠状病毒等传染源相关的风险。
                        </p>
                        <p>
                            ② 采取正确的清洁规程、消毒技术和工作方法来应对生物危害和传染病。
                        </p>
                        <p>
                            ③ 经过培训的高技能专业清洁人员，负责预防和应对疾病的传染和爆发。
                        </p>
                    </div>
                </div>
            </div>
            <div style="width:30%">
                <div id="container" style="height:300px;"></div>
            </div>
        </div>
        <div class="layui-form" style="margin-top:10px">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">订房日期</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="ID-Start-Date" placeholder="yyyy-MM-dd">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="ID-End-Date" placeholder="yyyy-MM-dd">
                    </div>
                </div>
                <div class="layui-inline" >
                  
                        <label class="layui-form-label">入住天数</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="daysDifference" disabled />
                        
                        </div>
                       
                </div>

            </div>
        </div>
        <div style="margin-top:10px">
            <table style="width:100%;background-color:aqua;text-align:center;border-collapse: collapse;">
                <tr>
                    <td style="width:19%">房型照片</td>
                    <td style="width:12%"></td>
                    <td style="width:15%">有无早餐</td>
                    <td style="width:10%;text-align:left">取消政策</td>
                    <td style="width:5%;text-align:left">入住人数</td>
                    <td style="width:10%;">金额</td>
                    <td style="width:20%;">操作</td>
                </tr>
            </table>
        </div>
        <div id="roomOrder">
            @*    <div class="layui-row" style=" align-items: stretch;height:280px" >
            <div class="layui-col-xs3" style="height:400px;padding-top:10px">
            <table style="text-align:center">
            <tr>
            <td>
            <img src="https://img0.baidu.com/it/u=383592790,2038439550&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1722704400&t=e525effa42a047a980181e8059a5bf8a" style="width:100%;height:100%;background-color:red" />
            </td>
            </tr>
            <tr>
            <td style="padding-top:10px">
            <span>大床房</span>
            </td>
            </tr>
            </table>
            </div>
            <div class="layui-col-xs9" style="height:230px">
            <ul style="padding-top:10px">
            <li style="text-align:center;">
            <span style="">大床房</span>
            <span style="margin-left:50px">有无早餐</span>
            <span style="margin-left:50px">限时取消</span>
            <span style="margin-left:50px">入住人数</span>
            <span style="margin-left:50px">
            操作
            </span>
            <hr />
            </li>
            </ul>
            </div>
            </div> *@
        </div>





        <script>
            layui.use(['jquery', 'table', 'laydate'], function () {
                var $ = layui.jquery;
                var carousel = layui.carousel;
                var table = layui.table;
                var laydate = layui.laydate;



                //渲染日期 //开启公历节日
                laydate.render({
                    elem: '#ID-Start-Date',
                    calendar: true,
                    done: function (value) {
                        calculateDays();
                        // 在这里可以处理日期值改变后的逻辑
                    }
                });

                //开启公历节日
                laydate.render({
                    elem: '#ID-End-Date',
                    calendar: true,
                    done: function (value) {
                        calculateDays();
                        // 在这里可以处理日期值改变后的逻辑
                    }
                });
                function getDate() {
                    // 获取当前日期
                    var currentDate = new Date();

                    // 计算默认的开始日期（当天）
                    var startDate = currentDate;

                    // 计算默认的结束日期（明天）
                    var nextDay = new Date(currentDate);
                    nextDay.setDate(currentDate.getDate() + 1);
                    var endDate = nextDay;

                    // 格式化日期为 YYYY-MM-DD
                    function formatDate(date) {
                        var year = date.getFullYear();
                        var month = date.getMonth() + 1; // getMonth返回的是0-11，所以要加1
                        var day = date.getDate();
                        return year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
                    }

                    // 设置开始日期和结束日期的默认值
                    $('#ID-Start-Date').val(formatDate(startDate));
                    $('#ID-End-Date').val(formatDate(endDate));
                }
                getDate();

                // 计算日期差并填充结果
                function calculateDays() {
                    var startDate = $('#ID-Start-Date').val();
                    var endDate = $('#ID-End-Date').val();

                    if (startDate && endDate) {
                        var startTimestamp = new Date(startDate).getTime();
                        var endTimestamp = new Date(endDate).getTime();
                        var timeDiff = endTimestamp - startTimestamp;
                        var daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));

                        $('#daysDifference').val(daysDiff); // 将计算结果填充到文本框
                    }
                }

                // 初次加载时执行计算
                calculateDays();

               
                function getSotres() {
                    $.ajax({
                        url: "http://localhost:5174/api/store/GetStores",
                        async: false,
                        type: "post",
                        contentType: "application/json",  // 明确设置数据格式为 JSON
                        data: JSON.stringify({ storeprice: 0 }),  // 将数据转换为 JSON 字符串
                        headers: //头部请求
                        {
                            "Authorization": "Bearer " + localStorage.getItem('token')
                        },
                        success: res => {

                            var content = '';

                            $.each(res.data, function (index, item) {
                                content += '<div><img style="width:500px;" src="' + item.storesImages + '"></div>'
                            })

                            $("#carousel").html(content);
                        }
                    });
                }
                getSotres();

                // 渲染 - 图片轮播
                carousel.render({
                    elem: '#ID-carousel-demo-image',
                    width: '500',
                    height: '300px',

                    interval: 3000
                });
                //房型显示
                function show() {
                    $.ajax({
                        url: 'http://localhost:5174/api/RoomHousingState/GetRoomtypeAndRoomHousing',
                        type: 'get',
                        headers: {
                            "Authorization": "Bearer " + localStorage.getItem('token')
                        },
                        async: true,
                        success: function (res) {
                            console.log(res.data)
                            var content = ``;
                            $.each(res.data, function (index, item) {
                                content += `<div class="layui-row" style="align-items: stretch;height:280px;" border >
                                                                                                            <div class="layui-col-xs3" style="height:400px;padding-top:10px">
                                                                                                                <table style="text-align:center">
                                                                                                                    <tr >
                                                                                                                        <td>
                                                                                                                         <img src="${item.roomImage}" style="width:100%;height:100%;background-color:red" />
                                                                                                                        </td>
                                                                                                                    </tr>
                                                                                                                    <tr>
                                                                                                                        <td style="padding-top:10px">
                                                                                                                            <span>${item.roomName}</span>
                                                                                                                        </td>
                                                                                                                    </tr>
                                                                                                                </table>
                                                                                                            </div>
                                                                                                                           <div class="layui-col-xs9" style="height:230px;align-items: stretch;">
                                                                                                                           <table style="text-align:center;width:100%;height:100%; border-collapse: collapse;" >`

                                $.each(item.housing, function (index, item1) {
                                    content += ` <tr style="border-top: none;border-left: none; border-right: none;border-bottom: 1px solid black;">
                                                                                                          <td>
                                                                                                                 ${item1.productsName}
                                                                                                          </td>
                                                                                                          <td>
                                                                                                               ${item1.breakfast}
                                                                                                          </td>
                                                                                                          <td>
                                                                                                             限时取消
                                                                                                         </td>
                                                                                                         <td>
                                                                                                            ${item.lodgingToll}人
                                                                                                         </td>
                                                                                                         <td>
                                                                                                            <span style="color:red;font-size:16px;">￥${item1.standardPrice}</span>
                                                                                                         </td>
                                                                                                         <td>
                                                                                                                                                           <button id="orderRoomButton" class="layui-btn layui-btn-primary layui-border-blue" data-productsName="${item1.productsName}" data-name="${item.roomName}" data-id="${item.roomId}" lay-event="btnClick">立即预订</button>
                                                                                                          </td>
                                                                                                </tr>`


                                })
                                content += `</table>
                                                                                                                        </div>
                                                                                                                   </div>`
                            });
                            $("#roomOrder").html(content)


                        },
                        error: function (error) {
                            console.error(error);

                        }
                    })
                }
                show()

                // 使用 document 或者已存在的父容器来绑定点击事件
                $(document).on('click', '#orderRoomButton', function () {
                    // 这里是点击事件处理程序的代码
                    // 可以在这里执行预订房间的操作或者打开预订页面等等
                   
                    localStorage.setItem("startTime", $("#ID-Start-Date").val())
                    localStorage.setItem("endTime", $("#ID-End-Date").val())
                    console.log(localStorage.getItem("startTime"))
                    console.log(localStorage.getItem("endTime"))
                    localStorage.setItem("orderRoomInfo", JSON.stringify($(this).data()))
                    location.href = "/first/bookingorderpage";
                });





                //地图定位自己所在位置
                $(function () {
                    var map = new AMap.Map('container', {
                        zoom: 13, // 初始缩放级别
                        resizeEnable: true // 初始中心点，这里设置成中国的经纬度中心点
                    });

                    // 进行实时定位的函数
                    function startRealTimeLocation() {
                        // 使用高德地图的定位 API 获取用户位置
                        AMap.plugin('AMap.Geolocation', function () {
                            var geolocation = new AMap.Geolocation({
                                enableHighAccuracy: true, // 是否使用高精度定位，默认:true
                                timeout: 10000, // 超过 10 秒后停止定位，默认：5s
                                buttonPosition: 'RB', // 定位按钮的停靠位置
                                buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：pixel(10, 20)
                                zoomToAccuracy: true // 定位成功后是否自动调整地图视野到定位点
                            });

                            map.addControl(geolocation);

                            geolocation.getCurrentPosition(function (status, result) {
                                if (status === 'complete') {
                                    // 在地图上显示定位点
                                    var marker = new AMap.Marker({
                                        position: result.position
                                    });
                                    marker.setMap(map);



                                    // 可以根据需要进行其他操作，例如更新界面上的位置信息等
                                    console.log('定位成功，经度：' + result.position.lng + '，纬度：' + result.position.lat);
                                } else {
                                    console.error('定位失败，原因：' + result.message);
                                }
                            });
                        });
                    }

                    // 页面加载完成后开始实时定位
                    startRealTimeLocation();
                });
            });

        </script>
        <style>
            #storeDecision {
                font-size: 16px; /* 字体大小为16像素 */
                text-indent: 2em; /* 近似于两字符的缩进，取决于当前字体的宽度 */
            }

            .scroll-container {
                height: 300px; /* 设定一个固定的高度 */
                overflow-y: auto; /* 允许在垂直方向上滚动 */
                border: 1px solid #ddd; /* 可选，为了更好地看到边界 */
                /*  padding: 10px; */ /* 可选，为内容提供内边距 */
            }

        </style>
    </main>
    <footer>
    </footer>
</body>



